{% extends 'base/base.html' %}



{% block title %}
偏好美食
{% endblock %}


{% block main %}
<div class="row">
    <div class="col-md-8">
        <div class="card mb-4">
            <div class="card-header bg-primary text-white">
                <h3>饮食偏好设置</h3>
            </div>
            <div class="card-body">
                <form method="post">
                    {% csrf_token %}

                    <div class="mb-4">
                        <h5>偏好的食物类别</h5>
                        <p class="text-muted">选择您偏好的食物类别，系统将优先推荐这些类别的食物</p>
                        <div class="row">
                            {% for category in all_categories %}
                            <div class="col-md-4 mb-2">
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" name="preferred_categories"
                                           value="{{ category.id }}" id="cat_{{ category.id }}"
                                           {% if category in user_pref.preferred_categories.all %}checked{% endif %}>
                                    <label class="form-check-label" for="cat_{{ category.id }}">
                                        {{ category.name }}
                                    </label>
                                </div>
                            </div>
                            {% endfor %}
                        </div>
                    </div>
                    <div class="mb-4">
                        <h5>偏好的标签</h5>
                        <p class="text-muted">选择您偏好的食物标签，系统将优先推荐带有这些标签的食物</p>
                        <div class="row">
                            {% for tag in all_tage %}
                            <div class="col-md-4 mb-2">
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" name="preferred_tags"
                                           value="{{ tag.id }}" id="tag_{{ tag.id }}"
                                           {% if tag in user_pref.preferred_tags.all %}checked{% endif %}>
                                    <label class="form-check-label" for="tag_{{ tag.id }}">
                                        <span class="badge me-1" style="background-color: {{ tag.color }};">
                                            {{ tag.name }}
                                        </span>
                                    </label>
                                </div>
                            </div>
                            {% endfor %}
                        </div>
                    </div>

                    <div class="mb-4">
                        <h5>不喜欢的食物</h5>
                        <p class="text-muted">选择您不喜欢的食物，系统将不会推荐这些食物</p>
                        <select class="form-select" multiple name="disliked_foods" size="8">
                            {% for food in all_foods %}
                            <option value="{{ food.id }}"
                                    {% if food in user_pref.disliked_foods.all %}selected{% endif %}>
                                {{ food.name }} ({{ food.category.name }})
                            </option>
                            {% endfor %}
                        </select>
                        <div class="form-text">按住Ctrl键可选择多个</div>
                    </div>

                    <div class="mb-4">
                        <h5>饮食限制/偏好</h5>
                        <p class="text-muted">例如：素食、无麸质、低糖等</p>
                        <textarea class="form-control" name="dietary_restrictions" rows="3"
                                  placeholder="例如：素食，不吃辣，少油少盐...">{{ user_pref.dietary_restrictions }}</textarea>
                    </div>

                    <button type="submit" class="btn btn-success">保存偏好设置</button>
                </form>
            </div>
        </div>
    </div>

    <div class="col-md-4">
        <div class="card mb-4">
            <div class="card-header bg-info text-white">
                <h5>饮食分析</h5>
            </div>
            <div class="card-body">
                <h6>最常吃的食物类别</h6>
                {% if category_stats %}
                    <ul class="list-group list-group-flush">
                        {% for cat in category_stats %}
                        <li class="list-group-item d-flex justify-content-between align-items-center">
                            {{ cat.name }}
                            <span class="badge bg-primary rounded-pill">{{ cat.count }}</span>
                        </li>
                        {% endfor %}
                    </ul>
                {% else %}
                    <p class="text-muted">暂无数据</p>
                {% endif %}
            </div>
        </div>
        <div class="card mt-4">
        <div class="card-header bg-info text-white">
            <h5>最常使用的标签</h5>
        </div>
            <div class="card-body">
                {% if user_tags %}
                    <ul class="list-group list-group-flush">
                        {% for tag in user_tags %}
                        <li class="list-group-item d-flex justify-content-between align-items-center">
                            <span class="badge" style="background-color: {{ tag.color }};">
                                {{ tag.name }}
                            </span>
                            <span class="badge bg-primary rounded-pill">{{ tag.usage_count }}</span>
                        </li>
                        {% endfor %}
                    </ul>
                {% else %}
                    <p class="text-muted">暂无标签使用数据</p>
                {% endif %}
            </div>
        </div>
        <div class="card">
            <div class="card-header bg-warning text-dark">
                <h5>最常吃的食物</h5>
            </div>
            <div class="card-body">
                {% if food_stats %}
                    <ul class="list-group list-group-flush">
                        {% for food in food_stats %}
                        <li class="list-group-item d-flex justify-content-between align-items-center">
                            {{ food.name }}
                            <span class="badge bg-warning rounded-pill text-dark">{{ food.count }}</span>
                        </li>
                        {% endfor %}
                    </ul>
                {% else %}
                    <p class="text-muted">暂无数据</p>
                {% endif %}
            </div>
        </div>

        <div class="card mt-4">
            <div class="card-body text-center">
                <h6>记录统计</h6>
                <div class="row text-center mt-3">
                    <div class="col-6">
                        <div class="display-6 text-primary">{{ total_records }}</div>
                        <small class="text-muted">总记录天数</small>
                    </div>
                    <div class="col-6">
                        <div class="display-6 text-success">{{ recent_records }}</div>
                        <small class="text-muted">最近30天记录</small>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


{% endblock %}